<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/data-tables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<!-- 客户群 -->

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer-group" class="cus_setgroup_statistics">
        <div class="header_wrapper">
            <div class="title">客户建群统计</div>
            <div class="text">
                <span>成员的群数量、日建群数量、建群趋势统计</span>
                <span class="on_cus_group_list">查看客户群列表</span>
            </div>
        </div>
        <div class="number_card_wrapper">
            <div class="number_card_item">
                <span class="num">1200</span>
                <span class="text">建群客户总数</span>
            </div>
            <div class="number_card_item">
                <span class="num">100</span>
                <span class="text">总群数</span>
            </div>
            <div class="number_card_item">
                <span class="num">5</span>
                <span class="text">今日建群</span>
            </div>
        </div>
        <div class="screen_wrapper">
            <div class="screen_item">
                <span class="text">成员：</span>
                <div class="group_member_select">全部</div>
            </div>
            <div class="screen_item">
                <span class="text">搜索：</span>
                <input id="search_input" class="layui-input" type="text">
            </div>
        </div>

        <div class="table_wrapper">
            <div class="table_header">
                <div class="left_wrapper">
                    <span class="group_num">共25个群聊</span>
                    <span class="group_customer_num">今日共新建5个群</span>
                </div>
                <a href="javascript:;" class="right_wrapper" id="export_btn">导出列表</a>
            </div>
            <table class="layui-table group_table" style="table-layout:fixed">
                <thead>
                    <tr>
                        <th>成员姓名</th>
                        <th>群数量</th>
                        <th>今日建群数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-id="1">
                        <td>刘毅华</td>
                        <td>1</td>
                        <td>0</td>
                    </tr>
                    <tr data-id="2">
                        <td>吴访</td>
                        <td>1</td>
                        <td>0</td>
                    </tr>
                    <tr data-id="3">
                        <td>叶铠齐</td>
                        <td>3</td>
                        <td>0</td>
                    </tr>
                </tbody>
            </table>
            <div class="paging_style" id="paging"></div>
        </div>

        <div class="trend_kpi_wrapper">
            <div id="group_trend_kpi"></div>
        </div>
    </div>

    <!-- 成员模态框 -->
    <div class="modal fade" id="addperson_modal" tabindex="-1" role="dialog" aria-labelledby="addperson_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addperson_modal_label">选择群主</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的成员</div>
                            <div class="selected">
                                <div class="department_members selected_members" id="selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 成员模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/data-tables/jquery.dataTables.min.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- chart图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <script>
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                useful: true
            },
            {
                id: 10,
                name: '子公司',
                pid: 1,
                department: true,
                useful: true
            },
            {
                id: "LiuYiHua",
                name: "刘毅华",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "YeKaiQi",
                name: "叶铠齐",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "LiangXiaoLing",
                name: "梁小玲",
                pid: 1,
                department: false,
                useful: true
            },
            {
                id: "WuFang",
                name: "吴访",
                pid: 10,
                department: false,
                useful: true
            },
            {
                id: "ZhaoHongRui",
                name: "赵虹蕊",
                pid: 2,
                department: false,
                useful: true
            },
            {
                id: "LvHaiYang",
                name: "吕海洋",
                pid: 2,
                department: false,
                useful: true
            },
            {
                id: "ZengHongYun",
                name: "曾红云",
                pid: 2,
                department: false,
                useful: true
            }
        ];
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer

                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });

                let memberSelected = []; // 选择的成员
                // 点击 成员部门 打开添加模态框 且 重新加载已选择的成员
                $(".group_member_select").click(function () {
                    $("#addperson_modal").modal("show");
                    let html2 = "";
                    for (let j = 0; j < memberSelected.length; j++) {
                        html2 += `
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].department}" data-useful="${memberSelected[j].useful}">${memberSelected[j].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `;
                    }
                    $("#selected_members").html(html2);
                });
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        if (useful) {
                            let data = {
                                id,
                                name,
                                pid,
                                department,
                                useful
                            };
                            let isAdd = true;
                            if (memberSelected.length > 0) {
                                for (let i = 0; i < memberSelected.length; i++) {
                                    if (memberSelected[i].name == data.name) {
                                        isAdd = false
                                        layer.msg('已经选过此成员了')
                                        break
                                    }
                                }
                            }
                            if (department == "false") {
                                if (isAdd) {
                                    memberSelected.push(data);
                                    $("#selected_members").append(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-useful="${data.useful}">${data.name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                                }
                            }
                        }

                    }
                });
                // 删除部门、成员
                $(".department_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    if (dep == "false") {
                        for (let i = 0; i < memberSelected.length; i++) {
                            if (id == memberSelected[i].id) {
                                memberSelected.splice(i, 1);
                                break;
                            }
                        }
                    }
                });
                // 拿到需要发送的部门、成员列表
                $("#submit_dep_member").click(function () {
                    totalDatalist = memberSelected;
                    let member_depart_select = ""
                    for (let i = 0; i < totalDatalist.length; i++) {
                        member_depart_select += `${totalDatalist[i].name},`
                    }
                    member_depart_select = member_depart_select.substring(0, member_depart_select.length - 1)
                    console.log(member_depart_select)
                    if (member_depart_select == '') {
                        $(".group_member_select").text('全部')
                    } else {
                        $(".group_member_select").text(member_depart_select)
                        $(".group_member_select").attr('title', member_depart_select)
                    }
                    console.log('memberSelected', totalDatalist) // 拿到选好的数据
                    // 执行ajax请求 重新加载table数据
                    $("#addperson_modal").modal("hide");
                });

                // 监听 搜索框 输入值变化
                $("#search_input").bind('input propertychange', function () {
                    let value = $(this).val()
                    // ajax 数据更新
                })

                // 2020-02-20 start
                // 点击 进入群聊详情
                // $(".group_table").on('click', 'tbody tr', function () {
                //     let id = $(this).attr('data-id') // 拿到群聊id
                //     self.location.href = "customer-group-detail.html?id=" + id + '&nav_index=2'
                // })
                // 2020-02-20 end

                // 查看客户群列表
                $(".on_cus_group_list").click(function () {
                    self.location.href = "customer-group.html?nav_index=2"
                })
            })

        });
        // group_trend_kpi 成员日建群趋势KPI
        var group_trend_kpi = Highcharts.chart('group_trend_kpi', {
            title: {
                text: '日建群趋势'
            },
            colors: ['#FFCC99', '#336699', '#99CCCC', '#CC6600', '#003333', 
   '#99CC33', '#CCCCCC', '#CCFF66', '#99CCFF', '#666699'],
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            subtitle: {
                text: ''
            },
            tooltip: {
                shared: true
            },
            xAxis: {
                categories: ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },
            series: [{
                name: '总数',
                data: [5, 2, 3, 4, 2, 5, 3, 2],
                color: '#cc0000'
            },
            {
                name: '刘毅华',
                data: [1, 1, 0, 0, 0, 0, 0, 0]
            },
            {
                name: '赵虹蕊',
                data: [2, 0, 1, 2, 1, 4, 1, 0]
            },
            {
                name: '吕海洋',
                data: [2, 1, 2, 2, 1, 5, 3, 2]
            }]
        })

    </script>
</body>

</html>